<script setup>
import { ref, watch } from 'vue';
import { useCookieStore } from '@/stores/cookieStore';
import { useAudioStore } from '@/stores/audioStore';
import { getRecommendSongAPi, getNewSongAPi } from '@/apis/song';
import ListCard from '@/components/ListCard/ListCard.vue'


const useCookie = useCookieStore()
const recommentSongs = ref([])

const getNewSong = async () => {
  // 判断是否登录；如果登录获取每日推荐音乐，未登录则获取推荐新音乐。
  if (useCookie.cookie.cookie) {
    const { data } = await getRecommendSongAPi()
    recommentSongs.value = data.data
    isShowSkeleton.value = false
  } else {
    const { data } = await getNewSongAPi()
    // 映射为固定的格式
    recommentSongs.value = data.result.map(item => {
      return {
        al: {
          name: item.song.album.name,
          picUrl: item.picUrl
        },
        ar: [
          { name: item.song.artists[0].name }
        ],
        dt: item.song.duration,
        name: item.name,
        id: item.id,
        privilege: item.song.privilege
      }
    })
    isShowSkeleton.value = false
  }
}

watch(() => useCookie.cookie.cookie, () => {
  getNewSong()
}, { immediate: true })


const useAudio = useAudioStore()
// 播放推荐歌单，将目前获取的歌单保存至播放列表
const playRecommentMusic = () => {
  useAudio.activeSongList = recommentSongs.value.dailySongs
}

// 播放新歌曲，将目前获取的歌单保存至播放列表
const playNewMusic = () => {
  useAudio.activeSongList = recommentSongs.value
}

// 骨架屏
const isShowSkeleton = ref(true)
</script>

<template>
  <!-- 推荐音乐 -->
  <div class="home-music">
    <div class="home-music-container" v-if="useCookie.cookie.cookie">
      <!-- 骨架屏 -->
      <el-space direction="vertical" alignment="flex-start">
        <!-- 骨架屏 DOM -->
        <el-skeleton :loading="isShowSkeleton" animated>
          <template #template>
            <el-skeleton-item variant="h3" class="title skeleton-title" />
          </template>
        </el-skeleton>
        <!-- / 骨架屏 DOM -->
        <el-skeleton :loading="isShowSkeleton" animated :count="8">
          <!-- 骨架屏 DOM -->
          <template #template>
            <el-skeleton-item variant="rect" class="skeleton-list-card" />
          </template>
          <!-- / 骨架屏 DOM -->
          <!-- 业务 DOM -->
          <template #default>
            <div class="list-card">
              <h1 class="title">推荐音乐</h1>
              <ListCard v-for="(song, index) in recommentSongs.dailySongs" :key="song.id" :song="song" :index="index"
                :privilege="recommentSongs.dailySongs[index].privilege" @play="playRecommentMusic" />
            </div>
          </template>
          <!-- / 业务 DOM -->
        </el-skeleton>
      </el-space>
      <!-- / 骨架屏 -->
    </div>

    <!-- 新音乐 -->
    <div class="home-music-container" v-else>
      <!-- 骨架屏 -->
      <el-space direction="vertical" alignment="flex-start">
        <!-- 骨架屏 DOM -->
        <el-skeleton :loading="isShowSkeleton" animated>
          <template #template>
            <el-skeleton-item variant="h3" class="title skeleton-title" />
          </template>
        </el-skeleton>
        <!-- / 骨架屏 DOM -->
        <el-skeleton :loading="isShowSkeleton" animated :count="10">
          <!-- 骨架屏 DOM -->
          <template #template>
            <el-skeleton-item variant="rect" class="skeleton-list-card" />
          </template>
          <!-- / 骨架屏 DOM -->
          <!-- 业务 DOM -->
          <template #default>
            <div class="list-card">
              <h1 class="title">新音乐</h1>
              <ListCard v-for="(song, index) in recommentSongs" :key="song.id" :song="song" :index="index"
                :privilege="recommentSongs[index].privilege" @play="playNewMusic" />
            </div>
          </template>
          <!-- / 业务 DOM -->
        </el-skeleton>
      </el-space>
      <!-- / 骨架屏 -->
    </div>
  </div>
</template>

<style scoped lang='scss'>
.home-music {
  height: 300px;

  .home-music-container {

    .title {
      margin-top: 30px;
      margin-bottom: 30px;
      font-size: 24px;
    }

    .skeleton-title {
      background-color: rgb(210, 210, 210);
      width: 100px;
      height: 30px;
    }

    .skeleton-list-card {
      margin: 10px 0px;
      height: 70px;
      padding: 10px 40px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 8px;
    }
  }

  :deep(.el-space) {
    display: block;
  }
}
</style>